<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="{:$smarty.const.PUBLIC_DIR}/common/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="{:$smarty.const.PUBLIC_DIR}/common/js/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="{:$smarty.const.PUBLIC_DIR}/common/js/ui.sortable.js"></script>
<style type="text/css">
<!--
html{
	scrollbar-face-color:#eee;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#fff;
	scrollbar-arrow-color:#fff;
	scrollbar-base-color:#eee;
	scrollbar-3dlight-color :#ccc;
	scrollbar-darkshadow-color:#ccc;
	scrollbar-track-color: #f9f9f9;
}
body{background:#666;color:#000;font-size:12px;padding:8px 10px;margin:0; font-family:宋体;}
a:link,a:visited{text-decoration:none;color:#000;}
a:hover,a:active{text-decoration:underline;color:#000;}
ul{padding:0;margin:0;}
li{list-style:none; display:block;}
.leftMenu .title{padding:2px 8px;margin:3px 0 1px;cursor:pointer;height:18px;line-height:18px;}
.leftMenu .mainTitle{padding:2px 8px;margin:3px 0 1px;background:#eee;text-align:center; }
.leftMenu .item{margin:0;background:#fff;padding:3px 8px;}
.leftMenu .items{margin:0;background:#fff;padding:3px 0;}
.hidden{display:none; }
.move{ cursor:move; background:#eee url({:$smarty.const.PUBLIC_DIR}/common/image/ui-bg_glass_75_dadada_1x400.png) 50% 50%; }
.hand{ background:#eee url({:$smarty.const.PUBLIC_DIR}/common/image/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50%; }

.ui-sortable-placeholder { border: 1px dotted #eee; margin:3px 0; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
-->
</style>
<script language="javascript" type="text/javascript">
function show(key){
  $('.item'+key).toggle('fast',function(){
	  var $str = $('.title'+key).html();
	  if($str=='+') $('.title'+key).html('-&nbsp;');
	  else $('.title'+key).html('+');
   });
}

$(function() {
	$(".leftMenu")
	.sortable({
		connectWith: '.leftMenu',
		update: function(event, ui) { order(); },
		axis: 'y',
		cursor: 'move' ,
		delay: 100,
		handle: '.title',
		opacity: 0.7
	});

	$(".title")
	.mousedown(function(){$(this).removeClass("hand");$(this).addClass("move");})
	.mouseup(function(){$(this).removeClass("move");$(this).addClass("hand");});
});

function order()
{
	var ids = '';
	$("li").each(function(i){
		if(ids == '')
		{
			ids=this.id;
		}
		else
		{
			ids+=','+this.id;
		}
	});
	if(confirm('是否要保存排序结果？'))
	{
		$.get('{:$smarty.const.BOOT_URL}/{:$i->c}/{:$i->m}/order/'+ids);
	}
	return false;
}
</script>
</head>
<body>
<ul class="leftMenu">
  {:foreach key=key item=items from=$i->menu}
  <li id="{:$items.id}">
  <div class="title titleBg hand" onclick="show('{:$key}');"><span class="title{:$key}">{:if $items.hidden}+{:else}-&nbsp;{:/if}</span>&nbsp;{:$items.title}</div >
  <div  class="items item{:$key} {:$items.hidden}">
    {:foreach item=item from=$items.items}
    <div class="item"><span>·</span> <a href="{:$item[1]}" target="main">{:$item[0]}</a>{:if $item[2] != '' } | <a href="{:$item[3]}" target="main">{:$item[2]}</a>{:/if}</div>
    {:/foreach}</div>
    </li>
  {:/foreach}
</ul>
</body>
</html>
